<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>指标 search</title>
    <link th:href="@{/static/css/nifty-demo.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/css/input/index_search.css?v=1.0.4}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/static/plugins/ztree/3.5.24/css/metroStyle/metroStyle.css}" rel="stylesheet">
    <link th:href="@{/static/css/core/app-core.css?v=1.3.4}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--<th:block th:include="include :: header('指标 search')" />-->
    <style>
        html,body,#container{
            height: 100%;
            min-width: 1500px;
        }
        .font_p3{
            font-size: 13px;
            margin: 2px 0 0 0;
        }
        .font_color_qian{
            color: #9b9b9c;
        }
        #search_input_div{
            height: 50px;
            width: 60%;
            margin: 110px auto 0 auto;
            position: relative;
        }
        #search_input{
            width: 100%;
            height: 100%;
            color: #FFF;
            line-height: 50px;
            font-size: 16px;
            border-radius: 50px;
            padding-left: 40px;
            padding-right: 48px;
            border: 2px solid #128ef2;
            background-color: #0a0903;
            outline: none;
        }
        #search_input_search{
            display: inline-block;
            position: absolute;
            font-size: 16px;
            top: 16px;
            right: 20px;
            cursor: pointer;
        }
        #search_input_search:hover{
            font-size: 18px;
            top: 15px;
            right: 19px;
        }
        #search_input_circle{
            display: inline-block;
            position: absolute;
            font-size: 16px;
            top: 16px;
            left: 20px;
            color: #128ef2;
        }
        #data_div span{
            margin: 0 2px;
        }

        .ztree li span.button{
            margin: 6px 2px 6px 0;
        }

        .ztreeTargetItem{
            font-size: 14px;
            line-height: 35px !important;
        }

        .ztreeTargetTitle{
            font-weight: bold;
        }

        .ztreeTargetStar{
            display: none; /*五角星隐藏*/
            font-size: 20px;
            /*color: #f4d000;*/
            color: #000;
            text-decoration: none;
        }

        #tree_target a{
            text-decoration: none;
        }
        .tree_leave0{
            font-weight: bold;
            color: #31708f !important;
        }



        /* 右侧手风琴 */
        a:hover,a:focus{
            text-decoration: none;
            outline: none;
        }
        #accordion .panel{
            border: none;
            border-radius: 5px;
            box-shadow: none;
            margin-bottom: 10px;
            background: transparent;
        }
        #accordion .panel-heading{
            padding: 0;
            border: none;
            border-radius: 5px;
            background: transparent;
            position: relative;
        }
        #accordion .panel-title{
            line-height: 21px;
            padding: 0;
        }
        #accordion .panel-title a{
            display: block;
            padding: 20px 30px;
            margin: 0;
            background: rgba(0,0,0,0.4);
            font-size: 17px;
            font-weight: bold;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            border-radius: 0px;
            position: relative;
        }
        #accordion .panel-title a.collapsed{ border: none; }
        #accordion .panel-title a:before,
        #accordion .panel-title a.collapsed:before{
            content: "\f107";
            font-family: "FontAwesome";
            width: 30px;
            height: 30px;
            line-height: 27px;
            text-align: center;
            font-size: 25px;
            font-weight: 900;
            color: #fff;
            position: absolute;
            top: 15px;
            right: 30px;
            transform: rotate(180deg);
            transition: all .4s cubic-bezier(0.080, 1.090, 0.320, 1.275);
        }
        #accordion .panel-title a.collapsed:before{
            color: rgba(255,255,255,0.5);
            transform: rotate(0deg);
        }
        #accordion .panel-body{
            padding: 20px 30px;
            font-size: 15px;
            color: #fff;
            line-height: 28px;
            letter-spacing: 1px;
            border-top: none;
            border-radius: 5px;
        }


    </style>
</head>

<body>
<div id="container" class="cls-container">

    <a class="btn-link text-thin" href="/main/index" style="position: absolute; left: 10px; top: 10px; z-index: 999; color: #FFF"><i class="fa fa-cogs"></i> 后台管理</a>

    <div class="col-xs-6" style="height: 100%; background-color: #38383a">

        <!--横线上方的字-->
<!--        <div style="margin: 100px auto 0 auto; border-bottom: 2px solid #FFF; width: 70%; overflow: auto">-->
<!--            <div class="col-xs-7 text-right">-->
<!--                <span class="text-bold text-primary" style="font-size: 70px">NET</span>-->
<!--                <span class="text-bold" style="font-size: 70px">LAB</span>-->
<!--            </div>-->
<!--            <div class="col-xs-5 text-left">-->
<!--                <p class="font_p3 text-bold" style="margin-top: 22px">OpenData Project</p>-->
<!--                <p class="font_p3 font_color_qian">By Hospital Quality Research</p>-->
<!--                <p class="font_p3 font_color_qian">医院质量大数据开放实验室</p>-->
<!--            </div>-->
<!--        </div>-->

<!--        &lt;!&ndash;横线下方的字&ndash;&gt;-->
<!--        <div class="mar-top">-->
<!--            <div class="col-xs-6 text-right font_color_qian" style="padding-right: 30px">-->
<!--                <div style="float: right;  margin-top: 5px">-->
<!--                    <span class="text-bold" style="font-size: 20px; letter-spacing: 2px">医院后勤运行质量</span>-->
<!--                    <br/>-->
<!--                    <span style="font-size: 20px; letter-spacing: 8px">评价指标体系</span>-->
<!--                </div>-->
<!--                <div style="float: right; font-size: 65px; margin-right: 10px; margin-top: -14px"><i class="fa fa-shield"></i></div>-->
<!--            </div>-->
<!--            <div class="col-xs-6 text-left">-->
<!--                <span style="font-size: 45px">专家评议系统</span>-->
<!--            </div>-->
<!--        </div>-->

        <div class="row" style="width: 70%; margin: 130px auto 0 auto">
            <img src="/static/img/title_index.png" width="100%" height="auto">
        </div>

        <!--搜索框-->
        <div id="search_input_div">
            <span class="input input--minoru">
                <input id="search_input" type="text" placeholder="关键词搜索" autocomplete="off" class="input__field input__field--minoru" />
                <label class="input__label input__label--minoru" for="search_input"></label>
                <i id="search_input_circle" class="fa fa-circle-o"></i>
                <i id="search_input_search" class="fa fa-search" onclick="do_search()"></i>
            </span>
        </div>

        <!--各类型数据-->
        <div class="font_color_qian" id="data_div" style="height: 90px; margin-top: 100px">
            <div class="col-xs-3 col-xs-offset-3 text-left" style="height: 100%; border-right: 1px dashed #CCC; padding-left: 50px">
                <p>指标数<span data-content="zhibiaoshu">0</span>个</p>
                <p>活跃指标数<span data-content="huoyuezhibiaoshu">0</span>个</p>
                <p>指标描述<span data-content="zhibiaomiaoshu">0</span>条</p>
            </div>
            <div class="col-xs-3 text-left" style="height: 100%; padding-left: 50px">
                <p>相关指标标签<span data-content="zhibiaobiaoqian">0</span>个</p>
                <p>指标评论数<span data-content="zhibiaopinglunshu">0</span>条</p>
            </div>
        </div>

    </div>

    <div class="col-xs-6" style="height: 100%; padding: 10px 0 0 0; overflow: auto; background-color: #e5e5e5">
        <!--<ul id="tree_target" class="ztree"></ul>-->

        <div class="col-md-12" style="padding: 0">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <div th:each="dict,i : ${targetClassList}" class="panel panel-default">
                    <div class="panel-heading" role="tab" th:id="'heading' + ${dict.id}">
                        <h4 class="panel-title">
                            <a th:class="${i.first} ? '' : 'collapsed'" role="button" data-toggle="collapse" data-parent="#accordion" th:href="'#collapse' + ${dict.id}" th:aria-expanded="${i.first}" th:aria-controls="'collapse' + ${dict.id}">
                                [[${dict.name}]] - [[${dict.value}]]
                            </a>
                        </h4>
                    </div>
                    <div th:id="'collapse' + ${dict.id}" th:class="'panel-collapse collapse ' + (${i.index} == 0 ? 'in' : '')" role="tabpanel" th:aria-labelledby="'heading' + ${dict.id}">
                        <div class="panel-body" th:data-target-class="${dict.id}" data-target-container="true">
                            <ul th:id="'tree_target_' + ${dict.id}" class="ztree"></ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>
</body>

<th:block th:include="include :: footer" />

<script th:inline="javascript">

    $(function(){
        // init_target_tree();
        // init_target_tree_ajax();
        initTargetClassList();
        init_any_count();
    });

    //搜索框中回车触发搜索跳转
    $("#search_input").on("keypress", function(){
        if(window.event.keyCode === 13){
            do_search();
        }
    });

    function do_search(){
        var keyVal = $("#search_input").val();
        if(isNotNull(keyVal)){
            window.location.href = "search_result/"+keyVal;
        }else{
            __toastr_warning("请填写关键字");
        }
    };

    //各种数量数据
    function init_any_count(){
        __ajax_get(ctx + "getAnyCount", {}, function(data){
            $("span[data-content='huoyuezhibiaoshu']").text(data.data.huoyuezhibiaoshu)
            $("span[data-content='zhibiaobiaoqian']").text(data.data.zhibiaobiaoqian)
            $("span[data-content='zhibiaomiaoshu']").text(data.data.zhibiaomiaoshu)
            $("span[data-content='zhibiaopinglunshu']").text(data.data.zhibiaopinglunshu)
            $("span[data-content='zhibiaoshu']").text(data.data.zhibiaoshu)
        })
    }

    function init_target_tree_ajax(id){
        __ajax_get(ctx + "treeAjax2", {}, function(data){
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                view : {
                    showLine: true,
                    showIcon: false,
                    showTitle: false,
                    fontCss: tree_getFont,
                    nameIsHTML: true,
                    nodeClasses : {add: []}
                },
                callback : {
                    onClick: zTreeWikiOnClick
                }
            };

            $.fn.zTree.init($("#tree_target"), setting, data);
        })
    }

    function tree_getFont(treeId, node) {
        return node.font ? node.font : {};
    }

    function zTreeWikiOnClick(event, treeId, treeNode) {
        var id = treeNode.id;
        if(id){
            window.location.href = "/wiki/"+id;
        }
    }

    function initTargetClassList() {
        $("div[data-target-container='true']").each(function() {
            var $class = $(this);
            var targetClassId = $class.attr("data-target-class");
            __ajax_get(ctx + "treeAjax3", {targetClassId: targetClassId}, function(data) {
                var setting = {
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    view : {
                        showLine: true,
                        showIcon: false,
                        showTitle: false,
                        fontCss: tree_getFont,
                        nameIsHTML: true,
                        nodeClasses : setNodeClass
                    },
                    callback : {
                        onClick: zTreeWikiOnClick
                    }
                };

                $.fn.zTree.init($("#tree_target_" + targetClassId), setting, data);
            })
        })
    }

    function setNodeClass(treeId, treeNode){
        return treeNode.level === 0 ? {add: ['tree_leave0']} : {remove: ['tree_leave0']};
    }

</script>

</html>